/* 全局样式 - 设置整个应用的基础样式 */
.root {
    -fx-background-image: url("uwe.jpg");
    -fx-background-size: cover;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center;
    -fx-font-family: 'Segoe UI', Arial, sans-serif; /* 设置全局字体，优先使用Segoe UI */
}

/* 移除半透明层，只在特定组件上应用背景 */
/* .root > * {
    -fx-background-color: rgba(255, 255, 255, 0.8); 
} */

/* 标题样式 - 用于应用的主标题 */
.title-label {
    -fx-font-size: 100px; /* 增加标题字体大小到50px */
    -fx-font-weight: bold; /* 设置标题为粗体 */
    -fx-text-fill: #0a264d; /* 更深的蓝色，确保可读性 */
    -fx-effect: dropshadow(gaussian, rgba(255,255,255,0.8), 1, 0, 0, 1), 
                dropshadow(gaussian, rgba(0,0,0,0.4), 6, 0.3, 0, 2); /* 双重阴影效果，增加可读性 */
    -fx-padding: 5px 15px; /* 添加内边距 */
}

/* 表格样式 - 设置表格及其组件的外观 */
.table-view {
    -fx-background-color: rgba(255, 255, 255, 0.85); /* 表格背景半透明 */
    -fx-border-color: #94c0e0; /* 更柔和的蓝色边框 */
    -fx-border-radius: 5px; /* 设置表格边框圆角 */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.15), 8, 0.2, 0, 2); /* 优化阴影效果，更自然的立体感 */
}

.table-view .column-header {
    -fx-background-color: #0a264d; /* 更深的背景色增加对比度 */
    -fx-text-fill: white; /* 保持文字为白色 */
    -fx-font-weight: bold; /* 保持文字为粗体 */
    -fx-font-size: 15px; /* 进一步增加字体大小 */
    -fx-padding: 10px 8px; /* 保持内边距 */
    -fx-border-color: #5d8bb3; /* 添加边框增强表头间的区分 */
    -fx-border-width: 0 1px 0 0; /* 只在右侧添加边框 */
}

/* 表头文字效果增强 */
.table-view .column-header .label {
    -fx-text-fill: white; /* 确保标签文字为白色 */
    -fx-font-weight: bold; /* 确保文字为粗体 */
    -fx-font-size: 15px; /* 确保字体大小 */
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.8), 2, 0, 0, 0); /* 添加文字阴影增强可读性 */
    -fx-alignment: CENTER; /* 文字居中对齐 */
    -fx-content-display: CENTER; /* 内容居中显示 */
}

.table-view .column-header-background {
    -fx-background-color: #0a264d; /* 与表头保持一致 */
    -fx-background-radius: 5px 5px 0 0; /* 保持表头上方圆角 */
    -fx-padding: 2px; /* 添加内边距 */
}

/* 表格行高优化 - 使表格能显示更多行 */
.table-view .table-row-cell {
    -fx-background-color: white; /* 保持背景为白色 */
    -fx-border-color: transparent transparent #c5d8e8 transparent; /* 更明显的边框颜色 */
    -fx-border-width: 0 0 1 0; /* 只显示底部边框 */
    -fx-padding: 2px 0; /* 减小行高 */
    -fx-font-size: 13px; /* 保持字体大小 */
    -fx-cell-size: 30; /* 明确设置单元格高度 */
}

.table-view .table-row-cell .text {
    -fx-fill: #000000; /* 确保单元格内的文字为黑色 */
    -fx-font-weight: normal; /* 正常粗细 */
}

.table-view .table-row-cell:odd {
    -fx-background-color: #e6f0ff; /* 更明显的奇数行背景色 */
}

.table-view .table-row-cell:selected {
    -fx-background-color: #c9deff; /* 纯色背景，不使用渐变 */
}

.table-view .table-row-cell:selected .text {
    -fx-fill: #000000; /* 选中行的文字颜色为黑色，提高可读性 */
    -fx-font-weight: bold; /* 选中行文字加粗 */
}

/* 确保表格单元格内容垂直居中 */
.table-view .table-cell {
    -fx-alignment: CENTER-LEFT; /* 单元格文字左对齐 */
    -fx-padding: 2px 10px; /* 调整水平内边距，减少垂直内边距 */
    -fx-font-size: 14px; /* 保持字体大小 */
    -fx-text-fill: black; /* 确保文字为黑色 */
}

/* 按钮样式 - 设置按钮外观和交互效果 */
.button {
    -fx-background-color: #2c5282; /* UWE风格蓝色 */
    -fx-text-fill: white; /* 设置按钮文字颜色为白色 */
    -fx-font-weight: bold; /* 设置按钮文字为粗体 */
    -fx-background-radius: 5px; /* 设置按钮圆角 */
    -fx-padding: 8px 15px; /* 设置按钮内边距 */
    -fx-cursor: hand; /* 鼠标悬停时显示手型光标 */
    -fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.6), 1, 0, 0, 1); /* 添加文字阴影 */
}

.button:hover {
    -fx-background-color: #1a365d; /* 深蓝色，UWE风格 */
    -fx-scale-x: 1.05; /* 鼠标悬停时按钮水平放大5% */
    -fx-scale-y: 1.05; /* 鼠标悬停时按钮垂直放大5% */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.25), 6, 0.3, 0, 2); /* 悬停时增强阴影 */
    -fx-transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的过渡动画 */
}

.button:pressed {
    -fx-background-color: #0f2942; /* 更深的蓝色 */
    -fx-scale-x: 0.98; /* 按钮按下时水平缩小2% */
    -fx-scale-y: 0.98; /* 按钮按下时垂直缩小2% */
}

/* 文本框样式 - 设置文本输入框外观 */
.text-field {
    -fx-background-color: white; /* 保持背景为白色 */
    -fx-border-color: #94c0e0; /* 保持蓝色边框 */
    -fx-border-radius: 5px; /* 保持圆角 */
    -fx-padding: 5px 8px; /* 增加内边距，让文字更清晰 */
    -fx-font-size: 14px; /* 增加字体大小 */
    -fx-text-fill: black; /* 确保文字为黑色 */
}

.text-field:focused {
    -fx-border-color: #2c5282; /* 聚焦时使用UWE蓝色 */
    -fx-effect: dropshadow(gaussian, rgba(44,82,130,0.3), 5, 0.2, 0, 0); /* 获得焦点时添加更优化的蓝色阴影 */
}

.text-field:disabled {
    -fx-background-color: #f5f9ff; /* 禁用状态下文本框背景为浅蓝色 */
    -fx-opacity: 0.8; /* 禁用状态下文本框透明度降低 */
}

/* 下拉框样式 - 设置下拉选择框外观 */
.combo-box {
    -fx-background-color: white; /* 保持背景为白色 */
    -fx-border-color: #94c0e0; /* 保持蓝色边框 */
    -fx-border-radius: 5px; /* 保持圆角 */
    -fx-padding: 3px; /* 调整内边距 */
    -fx-font-size: 14px; /* 增加字体大小 */
}

.combo-box:focused {
    -fx-border-color: #2c5282; /* 聚焦时使用UWE蓝色 */
}

.combo-box .list-cell {
    -fx-text-fill: black; /* 确保文字为黑色 */
    -fx-font-size: 14px; /* 确保字体大小 */
    -fx-padding: 6px 10px; /* 保持内边距 */
}

/* 标签样式 - 设置文本标签外观 */
.label {
    -fx-text-fill: #000000; /* 纯黑色，最大对比度 */
    -fx-font-size: 14px; /* 保持字体大小 */
}

/* 面板样式 - 设置TitledPane组件外观 */
.titled-pane {
    -fx-text-fill: #1a365d; /* UWE蓝色 */
    -fx-font-weight: bold; /* 设置标题文字为粗体 */
    -fx-background-color: rgba(255, 255, 255, 0.7); /* 添加透明背景 */
    -fx-background-radius: 8px; /* 设置背景圆角 */
}

.titled-pane > .title {
    -fx-background-color: #c4d9f0; /* 略微调亮背景色 */
    -fx-text-fill: black; /* 确保文字为黑色 */
    -fx-font-size: 15px; /* 增加字体大小 */
    -fx-font-weight: bold; /* 保持粗体 */
    -fx-padding: 8px; /* 增加内边距 */
}

.titled-pane > .title > .text {
    -fx-fill: #000000; /* 确保文字为黑色 */
    -fx-font-weight: bold; /* 确保文字为粗体 */
}

.titled-pane > .content {
    -fx-background-color: rgba(255, 255, 255, 0.9); /* 设置内容区背景为白色，90%不透明度 */
    -fx-border-color: #94c0e0; /* 柔和的蓝色边框 */
    -fx-border-width: 0 1 1 1; /* 设置内容区边框宽度，不包括顶部 */
    -fx-border-radius: 0 0 5px 5px; /* 设置内容区下方圆角 */
}

/* 分割面板样式 - 设置SplitPane组件外观 */
.split-pane {
    -fx-background-color: transparent; /* 设置分割面板背景透明 */
    -fx-padding: 0; /* 移除分割面板内边距 */
}

.split-pane-divider {
    -fx-background-color: #dee2e6; /* 设置分割线颜色为浅灰色 */
    -fx-padding: 1; /* 设置分割线宽度 */
}

/* 统计信息标签样式 - 用于显示数据统计的标签 */
.stat-label {
    -fx-font-weight: bold; /* 保持统计标签文字为粗体 */
    -fx-text-fill: #1a365d; /* 更深的蓝色 */
    -fx-font-size: 16px; /* 保持统计标签字体大小 */
}

/* 动画效果 - 为元素添加悬停动画 */
.animated-node {
    -fx-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 使用更平滑的缓动函数 */
}

.animated-node:hover {
    -fx-scale-x: 1.02; /* 鼠标悬停时元素水平放大2% */
    -fx-scale-y: 1.02; /* 鼠标悬停时元素垂直放大2% */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.18), 12, 0.3, 0, 4); /* 悬停时增加阴影效果 */
}

/* 状态指示器样式 - 用于显示不同状态的颜色 */
.status-available {
    -fx-text-fill: #006400; /* 更深的绿色，提高可读性 */
    -fx-font-weight: bold; /* 加粗 */
}

.status-unavailable {
    -fx-text-fill: #a30000; /* 更深的红色，提高可读性 */
    -fx-font-weight: bold; /* 加粗 */
}

.status-offline {
    -fx-text-fill: #303030; /* 更深的灰色，提高可读性 */
    -fx-font-weight: bold; /* 加粗 */
}

/* 卡片样式 - 用于创建卡片式UI组件 */
.card {
    -fx-background-color: rgba(255, 255, 255, 0.9); /* 设置卡片背景为白色，90%不透明度 */
    -fx-background-radius: 8px; /* 设置卡片背景圆角 */
    -fx-border-radius: 8px; /* 设置卡片边框圆角 */
    -fx-border-color: #94c0e0; /* 柔和的蓝色边框 */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.12), 10, 0.25, 0, 3); /* 优化阴影效果，更加精细自然 */
    -fx-padding: 15px; /* 设置卡片内边距 */
}

/* 卡片样式悬停效果增强 */
.card:hover {
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.18), 14, 0.3, 0, 5); /* 悬停时增强阴影效果 */
    -fx-translate-y: -1px; /* 轻微上移，增加悬浮感 */
    -fx-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 添加平滑过渡 */
}

/* 自定义滚动条 - 美化滚动条外观 */
.scroll-bar:vertical {
    -fx-background-color: transparent; /* 设置滚动条背景透明 */
    -fx-pref-width: 12; /* 设置滚动条宽度 */
}

.scroll-bar:vertical .thumb {
    -fx-background-color: linear-gradient(to right, #94c0e0, #afd4ea); /* 柔和的蓝色渐变 */
    -fx-background-radius: 6; /* 设置滚动条滑块圆角 */
    -fx-effect: innershadow(gaussian, rgba(0,0,0,0.1), 2, 0, 0, 0); /* 添加内阴影效果 */
}

.scroll-bar:vertical .thumb:hover {
    -fx-background-color: linear-gradient(to right, #2c5282, #3b689d); /* UWE蓝色渐变 */
    -fx-effect: innershadow(gaussian, rgba(0,0,0,0.2), 3, 0, 0, 0); /* 增强内阴影效果 */
}

.scroll-bar:vertical .increment-button,
.scroll-bar:vertical .decrement-button {
    -fx-background-color: transparent; /* 设置滚动条按钮背景透明 */
    -fx-padding: 0 5 0 5; /* 设置滚动条按钮内边距 */
}

/* 对话框样式 - 自定义对话框外观 */
.alert-dialog {
    -fx-background-color: white; /* 设置对话框背景为白色 */
    -fx-background-radius: 8px; /* 设置对话框背景圆角 */
    -fx-border-radius: 8px; /* 设置对话框边框圆角 */
    -fx-border-color: #dee2e6; /* 设置对话框边框颜色为浅灰色 */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.2), 14, 0.3, 0, 5); /* 优化阴影效果，更自然精细 */
}

.alert-dialog > *.button-bar > *.container {
    -fx-background-color: transparent; /* 设置对话框按钮容器背景透明 */
}

.alert-dialog > *.label.content {
    -fx-font-size: 14px; /* 设置对话框内容文字大小 */
    -fx-padding: 10px; /* 设置对话框内容内边距 */
}

.alert-dialog:header *.header-panel {
    -fx-background-color: #f8f9fa; /* 设置对话框标题栏背景为浅灰色 */
    -fx-background-radius: 8px 8px 0 0; /* 设置对话框标题栏上方圆角 */
}

.alert-dialog:header *.header-panel *.label {
    -fx-font-size: 16px; /* 设置对话框标题文字大小 */
    -fx-font-weight: bold; /* 设置对话框标题文字为粗体 */
    -fx-text-fill: #212529; /* 设置对话框标题文字颜色为深色 */
}

.alert-dialog .button {
    -fx-background-color: #3498db; /* 设置对话框按钮背景为蓝色 */
    -fx-text-fill: white; /* 设置对话框按钮文字颜色为白色 */
    -fx-font-weight: bold; /* 设置对话框按钮文字为粗体 */
    -fx-background-radius: 5px; /* 设置对话框按钮圆角 */
    -fx-padding: 8px 15px; /* 设置对话框按钮内边距 */
    -fx-cursor: hand; /* 鼠标悬停时显示手型光标 */
}

.alert-dialog .button:hover {
    -fx-background-color: #2980b9; /* 鼠标悬停时按钮变为深蓝色 */
    -fx-scale-x: 1.05; /* 鼠标悬停时按钮水平放大5% */
    -fx-scale-y: 1.05; /* 鼠标悬停时按钮垂直放大5% */
}

.alert-dialog .button:pressed {
    -fx-background-color: #1c6ea4; /* 按钮按下时变为更深的蓝色 */
    -fx-scale-x: 0.98; /* 按钮按下时水平缩小2% */
    -fx-scale-y: 0.98; /* 按钮按下时垂直缩小2% */
}

/* 顶部面板样式 - 移除，替换为更精确的选择器 */
/* .root > .border-pane > .top {
    -fx-background-color: rgba(255, 255, 255, 0.85);
    -fx-background-radius: 0 0 8px 8px;
} */

/* 主内容区域VBox样式 */
.root > BorderPane > .center > VBox {
    -fx-background-color: transparent; /* 保持透明 */
}

/* 为表格和信息面板所在的区域添加背景 */
/* TitledPane > .content {
    -fx-background-color: rgba(255, 255, 255, 0.9);
    -fx-border-color: #dee2e6; 
    -fx-border-width: 0 1 1 1;
    -fx-border-radius: 0 0 5px 5px;
} */

/* 为 SplitPane 中的 VBox 添加半透明背景 */
.split-pane .vbox {
    -fx-background-color: rgba(255, 255, 255, 0.5); /* 设置半透明背景 */
    -fx-background-radius: 8px; /* 设置背景圆角 */
}